jQuery Note

jQuery: JavaScript library

1. jQuery 和 DOM 的转换

• DOM ---> jQuery

  $(DOM obj)

        var obj = document.getElementById('d1');
        var $obj = $(obj);
        $obj.html('hello');

• jQuery ---> DOM

  $obj.get(0) or $obj.get()[0]

        var $obj = $('#d1');
        var obj = $(obj).get(0);
        obj.innerHTML = 'hello';

2. Selector

similar to CSS selector

2.1 基本选择器

• #id
• .class
• element
• selector1, selector2, ...
• * : all elements

2.2 层次选择器

• selector1 selector2 ... : find 2 in 1
• selector1 > selector2 : 只找直接字节点
• selector1 + selector2 : selector1的下一个selector2兄弟节点
• selector1 ~ selector2 : selector1的所有selector2兄弟

2.3 过滤选择器

start by : or []

• :first
• :last
• :not(selector)
• :even
• :odd
• :eq(index)
• :gt(index)
• :lt(index)
• :nth-child(index/odd/even) //index starts from 1

• :constains(text) : 包含text文本的元素
• :empty : 不包含子元素和文本的空元素
• :has(selector)
• :parent : 包含子元素或文本的元素

• :hidden
• :visible
• [attribute]
• [attribute = val]
• [attribute != val]

For Form Elements:

• :enabled
• :disabled
• :checked
• :selected

2.4 表单选择器

• :input
• :text
• :password
• :radio
• :checkbox
• :submit
• :image
• :reset
• :button
• :file

3. Query

Query(无参数时) or Modify(有参数时) Methods

• html()
• text()
• val()
• attr()

4. DOM 操作

4.1 Create DOM Element

    $(html)

    var $obj = $('<div>hello</div>');

4.2 Insert

• 子节点

  • append($obj)
  • prepend($obj)

• 兄弟节点

  • after($obj)
  • before($obj)

4.3 delete

• remove()
• remove(selector)
• empty()

4.4 Clone

• clone()
• clone(true) //复制节点也有同样行为，复制处理代码

4.5 Style

• attr("attr", "val");
• addClass(" ");
• removeClass(""); // 无参数时表示移除所有样式
• toggleClass(" "); // 切换样式
• hasClass("");
• css(""); //读取css值
• css("", ""); //设置样式 可以连缀使用

4.6 Iterate

• childen() / childen(selector)
• next() / next(selector)
• prev() / prev(selector)
• siblings / siblings(selector)
• find(selector)
• parent()

5. Event

5.1 Event Bind

• $obj.bind(event type, handler function);
• $obj.eventType(func);

5.2 Get Event Object

        $obj.click(function(e) {
            ...;
        });

e是jquery对象，是DHTML里面的封装

5.3 Event

• Attributes:

  • var obj = e.target // return DOM object
  • e.pageX
  • e.pageY

• 事件冒泡机制

  • e.stopPropagation()

• 合成事件

  • hover
  • toggle() 在多事件响应中切换
• 模拟操作：

        $obj.trigger(EventType)
        e.g. 
            $obj.trigger("focus");
            简写： $obj.focus();

6. jQuery 动画

• show(slow/fast/normal/ms, callback)
• hide(slow/fast/normal/ms, callback)
• slideDown()
• slideUp()
• fadeIn()
• fadeOut()

• 自定义：

  • animate({'left': '500px'}, ms, callback)
  • animate({'left': '500px'}, ms).callback();

7. 类数组

• length
• each(func)
• eq(index)
• get()
• index(obj)

8. AJAX

• load(请求地址，请求参数)

  有请求参数发POST
  无请求参数发GET

• get(请求地址，请求参数，回调函数，服务器返回的数据类型(html/text/JSON/xml/script))

• ajax({})

  {}内可以设置的参数

  • url
  • type
  • data
  • dataType
  • sucess
  • error
  • async: true